<template>
  <el-dialog
    title="添加好友"
    :visible.sync="show"
    @close="$emit('close')"
    width="500px"
  >
    <div>
      <el-radio v-model="type" label="name">用户名称查找</el-radio>
      <el-radio v-model="type" label="id">用户ID查找</el-radio>
      <el-divider />
      <el-input
        v-if="type == 'name'"
        v-model="username"
        placeholder="请输入用户名称"
      >
        <el-button slot="append" @click="searchByName">查询</el-button>
      </el-input>
      <el-input v-if="type == 'id'" v-model="userid" placeholder="请输入用户ID">
        <el-button slot="append" @click="searchById">查询</el-button>
      </el-input>
    </div>
    <template v-if="list.length>0">  
    <div 
    class="user-list" 
    v-for="item in list"
    :key="item.userid"
    >
      <img :src="`${$API+item.avatar}`" alt="">
      <div class="user-search-info">
        <div class="user-search-name">{{item.username}}</div>
        <div class="user-search-userid">用户ID：{{item.userid}}</div>
      </div>
      <el-tooltip class="item" effect="dark" content="添加好友" placement="bottom-end">
        <i 
        class="el-icon-plus adduser"
        @click="addFriend(item.userid)"
        ></i>
      </el-tooltip>
    </div>
    </template>
  </el-dialog>
</template>

<script>
import axios from "axios";
export default {
  name: "add-modal",
  props: {
    show: {
      default: true,
      type: Boolean,
    },
  },
  watch: {
    type(ol, ne) {
      if (ol != ne) {
        this.userid = "";
        this.username = "";
      }
    },
  },
  data() {
    return {
      userid: "",
      username: "",
      type: "name",
      list:[]
    };
  },
  methods: {
    searchByName() {
      axios
        .post(`${this.$API}/findUser`, {
          type: this.type,
          username: this.username,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.list = res.data.data
          }
        });
    },
    searchById() {
      axios
        .post(`${this.$API}/findUser`, {
          type: this.type,
          userid: this.userid,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.list = res.data.data
          }
        });
    },
    addFriend(id) {
      const idx = this.$_.users.findIndex(t => t.userid == id)
      console.log(idx, 'idx')
      if (!(idx<0)) {
        this.$message.warning('你们已经是好友了！')
        return 
      }
      axios.post(`${this.$API}/addFriend`, {
        userid: this.$_.io.userid,
        friend: id
      }).then(res => {
        if (res.data.code === 200) {
          this.list = [];
          this.userid = "";
          this.username = "";
          this.$message.success(res.data.msg);
          this.$emit('close')
        }
      })
    }
  },
};
</script>

<style scoped>
.res-list {
  list-style: none;
  line-height: 40px;
}
.res-list > li {
  border-bottom: 1px solid #666;
}
.user-list {
  display: flex;
  padding: 10px 0 ;
  align-items: center;
}
.user-list img {
  width: 80px;
  height: 80px;
}
.user-search-info {
  flex: 1;
  padding: 0 10px;
}
.user-search-name {
  font-size: 24px;
  font-weight: bold;
}
.user-search-userid {
    font-size: 12px;
    color: #949494;
}
.adduser {
  font-size: 24px;
  cursor: pointer;
}
</style>
